<template>
  <div>

    <!-- 表单行：所有输入控件排成一行 -->
    <div class="form-row">
      <div class="form-item">
        <span>状态：</span>
        <el-select v-model="value" placeholder="请选择" style="width: 150px">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>

      <div class="form-item">
        <span>姓名：</span>
        <el-input v-model="input" placeholder="请输入姓名" style="width: 150px"></el-input>
      </div>

      <div class="form-item">
        <span>账号：</span>
        <el-input v-model="input" placeholder="请输入账号" style="width: 150px"></el-input>
      </div>

      <div class="form-item">
        <span>手机号：</span>
        <el-input v-model="input" placeholder="请输入手机号" style="width: 150px"></el-input>
      </div>

      <el-button type="primary">查询</el-button>
      <el-button type="success">重置</el-button>

    </div>




    <el-table :data="tableData" border style="width: 100%">
      <el-table-column fixed prop="date" label="状态">
      </el-table-column>
      <el-table-column prop="name" label="姓名">
      </el-table-column>
      <el-table-column prop="account" label="账号">
      </el-table-column>
      <el-table-column prop="phoneNumber" label="手机号">
        
      </el-table-column>

 <!-- 修改点：头像列改为图片显示 -->
      <el-table-column prop="avatar" label="头像">
        <template slot-scope="scope">
          <el-avatar :size="50" :src="scope.row.avatar"></el-avatar>
        </template>
      </el-table-column>
      <!-- 操作列宽度设置为150px -->
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">重置密码</el-button>
          <el-button type="text" size="small">封禁</el-button>
        </template>
      </el-table-column>
    </el-table>


    <!-- 分页组件：左对齐并距离表格10px -->
    <el-pagination class="pagination-left" background layout="prev, pager, next" :total="1000">
    </el-pagination>
  </div>


</template>

<script>
export default {
  methods: {
    handleClick(row) {
      console.log(row);
    }
  },

  data() {
    return {
      input: '',

      options: [{
        value: '选项1',
        label: '正常'
      }, {
        value: '选项2',
        label: '禁用'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: '',


      tableData: [{
        date: '正常',
        name: '王小虎',
        account: 'user01',
        phoneNumber: '普陀区',
        avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
        zip: 200333
      }, {
        date: '正常',
        name: '王小虎',
        account: 'user01',
        phoneNumber: '18650557412',
        avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
        zip: 200333
      }, {
        date: '正常',
        name: '王小虎',
        account: 'user01',
        phoneNumber: '普陀区',
        avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
        zip: 200333
      }, {
        date: '正常',
        name: '王小虎',
        account: '上海',
        phoneNumber: '普陀区',
        avatar: '上海市普陀区金沙江路 1516 弄',
        zip: 200333
      }]
    }
  }

}
</script>


<style scoped>
/* 表单行样式 */
.form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  /* 表单项之间的间距 */
  margin-bottom: 15px;
}

/* 每个表单项的容器 */
.form-item {
  display: flex;
  align-items: center;
}

/* 文本标签样式 */
.form-item span {
  margin-right: 8px;
  white-space: nowrap;
}

/* 分页左对齐样式 */
.pagination-left {
  margin-top: 10px;
  /* 距离表格10px */
  text-align: left;
  /* 左对齐 */
}
</style>
